<template>
	<div class="app-container" v-loading="loading">
		<div
			class="table-title-wrap justify-end"
			style="background-color: #fff; width: 100%"
			v-if="$route.query.beFrom">
			<el-button type="primary" plain size="mini" @click="back">返回</el-button>
		</div>
		<el-row type="flex" style="justify-content: space-between">
			<div style="flex: 1; min-width: 0">
				<div
					style="
						height: 100%;
						background-color: #fff;
						box-sizing: border-box;
						padding: 10px;
						margin-right: 10px;
					">
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="额度申请详情" name="limit"></el-tab-pane>
						<el-tab-pane
							:label="infoData.carSourceType == '2' ? '订单详情(辆)' : '订单详情(型)'"
							name="orderDetails"></el-tab-pane>
						<el-tab-pane label="合同详情" name="contract"></el-tab-pane>
						<el-tab-pane label="交车信息" name="vehicle"></el-tab-pane>
						<el-tab-pane label="合同变更" name="contractChange"></el-tab-pane>
					</el-tabs>
					<keep-alive>
						<div v-if="activeName == 'contractChange'">
							<OnListHistory
								v-model="infoData"
								state="readonly"
								type="preview"></OnListHistory>
						</div>
					</keep-alive>
					<keep-alive>
						<div v-show="activeName == 'limit' && notEmpty(infoData1)">
							<Details :value="infoData1" state="readonly" type="preview"></Details>
						</div>
					</keep-alive>
					<div v-if="activeName == 'orderDetails'">
						<orderDetailCommon v-model="form" :carSourceType="infoData.carSourceType" />
					</div>
					<div v-if="activeName == 'contract'">
						<ectVisa v-model="form" />
					</div>
					<div v-if="activeName == 'vehicle'">
						<table-page :dataList="orderCarList" border :total="total">
							<!-- 普通列插槽 -->
							<template slot="tableCol">
								<el-table-column label="车系" align="center" prop="carSeriesName" />
								<el-table-column label="车牌号" align="center" prop="carPlateNo" />
								<el-table-column label="车架号" align="center" prop="carVinNo" />
								<el-table-column
									label="车辆状态"
									align="center"
									prop="orderCarStatusStr" />
								<el-table-column
									label="交车时间"
									align="center"
									prop="deliveryTime" />
								<el-table-column
									label="交车工作人员"
									align="center"
									prop="deliveryUserName" />
								<el-table-column label="保险" align="center" prop="insuranceType" />
								<el-table-column
									label="年检"
									align="center"
									prop="inspectionStatus" />
								<el-table-column
									label="所属城市"
									align="center"
									prop="carLicenseCityVal" />
								<el-table-column
									label="当前里程/km"
									align="center"
									prop="carMileage" />
							</template>
						</table-page>
						<table-page :dataList="dataList" border :total="total">
							<template slot="tableCol">
								<el-table-column label="品牌" align="center" prop="carBrandName" />
								<el-table-column label="车系" align="center" prop="carSeriesName" />
								<el-table-column
									label="车型"
									align="center"
									prop="carModelName"
									min-width="100px"
									show-overflow-tooltip />
								<el-table-column
									label="能源类型"
									align="center"
									prop="carPowerTypeStr"
									min-width="100px"
									show-overflow-tooltip />
								<el-table-column
									label="颜色"
									align="center"
									prop="appearanceColor" />
								<el-table-column label="每期租金(元)" align="center">
									<template slot-scope="scope">
										<span>
											{{ format_thousand(scope.row.planRent) }}
										</span>
									</template>
								</el-table-column>
								<el-table-column
									label="租期(月)"
									align="center"
									prop="planTenancyTypeStr" />
								<el-table-column
									label="加装费(元)"
									align="center"
									prop="attachedDecorationAmount">
									<template slot-scope="scope">
										<span>
											{{
												format_thousand(scope.row.attachedDecorationAmount)
											}}
										</span>
									</template>
								</el-table-column>
								<el-table-column
									label="登记性质"
									align="center"
									prop="operationTypeStr" />
								<el-table-column
									label="批过数量"
									align="center"
									prop="quantityApproved" />
								<el-table-column
									label="未下单数量"
									align="center"
									prop="quantityUndelivered" />
								<el-table-column
									label="下单数量"
									align="center"
									prop="quantityOrder" />
							</template>
						</table-page>
					</div>
				</div>
			</div>
			<FlowRecord
				v-if="form.processId"
				:id="form.processId"
				:customStyle="{
					maxWidth: '280px',
					minWidth: '300px',
				}" />
		</el-row>
	</div>
</template>
<script>
	import orderDetailCommon from './components/orderDetailCommon';
	import ectVisa from './components/ectVisa';
	import { getOrderDetail } from '@/api/vehicleOrder';
	import Details from '@/views/quota/forecast/chunk/details_apply/index.vue';
	import * as apis from '@/api/quota/forecast/edit/api.js';
	import OnListHistory from '@/views/order/mainOrder/onListHistory/index.vue';
	export default {
		name: 'OrderDetails',
		data() {
			return {
				loading: false,
				form: {},
				infoData1: {},
				infoData: {},
				dataList: [],
				orderCarList: [],
				total: 0,
				activeName: 'limit',
			};
		},
		components: {
			orderDetailCommon,
			ectVisa,
			Details,
			OnListHistory,
		},
		watch: {
			'$route.query.orderId': {
				handler(val) {
					if (val) {
						this.getOrderDetail();
						// this.initData();
					}
				},
				deep: true,
				immediate: true,
			},
			// infoData(val, oldval) {
			// 	console.log('newVal');
			// 	console.log(val);
			// 	console.log('oldval');
			// 	console.log(oldval);
			// },
		},
		created() {
			// this.getOrderDetail();
			this.initData();
		},
		methods: {
			initData() {
				apis?.Details(this.$route.query.calcSchemeId)
					.then(res => {
						if (res.code == 200) {
							this.infoData1 = JSON.parse(JSON.stringify(res.data));
						}
					})
					.finally(() => {});
			},
			async getOrderDetail() {
				this.loading = true;
				try {
					let res = await getOrderDetail(this.$route.query.orderId);
					this.loading = false;
					this.form = res.data;
					this.dataList = res.data.orderPlanList;
					this.orderCarList = res.data.orderCarList;
				} catch (error) {
					this.loading = false;
				}
			},
			handleClick() {
				// if (this.activeName == 'limit') {
				//   this.initData();
				// }
			},
			back() {
				this.$tab.closeOpenPage(this.$route);
				if (this.$route.query.isMenu) {
					this.$router.push({
						name: this.$route.query.beFrom,
						query: {
							preOrderId: this.$route.query.preOrderId,
							isMenu: this.$route.query.isMenu,
						},
					});
				} else {
					this.$router.push({
						name: this.$route.query.beFrom,
					});
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
	.box_content {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		.box {
			width: 45%;
			min-height: 300px;
			.title {
				border-left: 3px solid #3280fc;
				padding-left: 5px;
				box-sizing: border-box;
			}
			.content {
				width: 70%;
				min-height: 300px;
				margin: 0 auto;
			}
		}
	}
</style>
